<template>
  <div class="common-page pay-info-page">
    <div class="pay-info">
      <span>支付金额</span>
      <span>￥{{ (boxInfo.price / 100).toFixed(2) }}</span>
    </div>
    <van-cell
      title="抽盒券"
      is-link
      @click="showMoreCash"
    >
      <template>
        <span v-if="!couponInfo.value">未使用</span>
        <span
          class="custom-title"
          v-if="couponInfo.value"
        >减{{ (couponInfo.value / 100).toFixed(2) }}</span>
      </template>
    </van-cell>
    <div class="pay-btn-box">
      <div class="left">
        <div class="original-money">
          <span>￥</span>
          <span v-if="practicalPayPrice">{{ practicalPayPrice.split(".")[0] }}.</span>
          <span v-if="practicalPayPrice">{{
            practicalPayPrice.split(".")[1]
              ? practicalPayPrice.split(".")[1]
              : "00"
          }}</span>
        </div>
        <span
          class="discounts-money"
          v-if="couponInfo.value"
        >已优惠￥{{ (couponInfo.value / 100).toFixed(2) }}</span>
      </div>
      <van-button
        round
        type="primary"
        @click="onPayBtnClick"
      >支付</van-button>
    </div>
    <van-action-sheet
      v-model="show"
      title="选择抽盒券"
    >
      <div class="content">
        <empty-data
          description="空空如也~"
          :emptyImg="emptyImg"
          v-if="!list.length"
        ></empty-data>
        <van-radio-group v-model="checked">
          <van-cell-group inset>
            <van-cell
              clickable
              v-for="(item, index) in list"
              :key="index"
              :class="item.isPast || item.status === 20 ? 'no-cell' : ''"
            >
              <template #title>
                <box-cash-coupon-item
                  :cashCouponInfo="item"
                  :isShowReasion="true"
                  :payPrice="boxInfo.price"
                  v-if="!item.isPast"
                ></box-cash-coupon-item>
              </template>
              <template #right-icon>
                <van-radio
                  v-if="!item.isPast"
                  :name="item.id"
                  :disabled="
                    !(
                      item.status === 10 &&
                      boxInfo.price > item.minPrice &&
                      boxInfo.price > item.value &&
                      !item.isPast
                    )
                  "
                />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div
        class="btn-box"
        v-if="list.length"
      >
        <van-button
          type="primary"
          round
          @click="selectCoupon"
        >确定</van-button>
      </div>
    </van-action-sheet>
    <pay-blind-box
      :boxInfo="boxInfo"
      :couponInfo="couponInfo"
      ref="payOrder"
      @openBoxSuccess="openBoxSuccess"
      @acceptBlindbox="acceptBlindbox"
      @convertMoney="convertMoney"
      @getOrderInfoSuccess="getOrderInfoSuccess"
    ></pay-blind-box>
  </div>
</template>


<script>
import apBox from "@/common/api/apBox";
import Share from "./mixin/share";
import BoxCashCouponItem from "@/components/BoxCashCouponItem";
import PayBlindBox from "@/components/PayBlindBox";
import EmptyData from "@/components/EmptyData";
import apiCash from "@/common/api/apiCash";
import { Dialog } from "vant";
export default {
  name: "PayInfo",
  components: {
    [BoxCashCouponItem.name]: BoxCashCouponItem,
    [PayBlindBox.name]: PayBlindBox,
    [EmptyData.name]: EmptyData,
  },
  mixins: [Share],
  data() {
    return {
      timer: null, //定时器
      orderId: "", //订单id
      title: "",
      content: "",
      show: false,
      list: [],
      checked: "",
      boxInfo: {},
      prizeInfo: {}, //奖品信息
      prizeType: "", // 获得的奖品类型  0是现金券1是商品
      prizeId: "", // 获得的奖品id
      couponInfo: {
        value: 0,
      },
      practicalPayPrice: 0,
      emptyImg:
        "http://alivod.sdxgxx.cn/image/default/805FA0987DC9499D957BB7FF046D958C-6-2.png",
      boxUserRelation: "",
    };
  },
  created() {
    if (this.$route.query.boxInfo) {
      let boxInfo = JSON.parse(this.$route.query.boxInfo) || {};
      this.boxInfo = boxInfo;
      this.practicalPayPrice = (this.boxInfo.price / 100).toFixed(2).toString();
    }
    this.timer && clearInterval(this.timer);
    this.getList();
    this.setShare();
  },
  mounted() {},
  methods: {
    // //  进入填写地址页面
    // enterIntoFillAddress(prizeInfo) {
    //   console.log('进入填写地址页面')
    //   console.log(this.boxUserRelation)
    //   this.$router.replace({
    //     path: "/fillAddress",
    //     query: {
    //       prizeInfo: JSON.stringify(prizeInfo),
    //       boxId: this.boxUserRelation,
    //     },
    //   });
    // },
    //  这换现金券
    convertMoney() {
      this.$toast.loading();
      apiCash
        .getExchangeableCashCoupon({
          userBoxId: this.boxUserRelation,
          userId: this.userInfo.userId,
        })
        .then((data) => {
          this.cashInfo = data.data;
          this.$toast.clear();
          this.showDialog();
        });
    },
    showDialog() {
      Dialog.confirm({
        title: "提示",
        message: "该奖品可以折换" + this.cashInfo.name,
        confirmButtonText: "折换",
      })
        .then(() => {
          this.exchangeUserBoxPrize();
        })
        .catch(() => {});
    },
    //  折换
    exchangeUserBoxPrize() {
      apiCash
        .exchangeUserBoxPrize({
          userBoxId: this.boxUserRelation,
          userId: this.userInfo.userId,
        })
        .then(() => {
          this.$toast.clear();
          this.$router.go(-1);
        });
    },
    //  获取订单信息成功
    getOrderInfoSuccess(boxUserRelation) {
      console.log("获取订单信息成功");
      console.log(boxUserRelation);
      this.boxUserRelation = boxUserRelation;
    },
    //  打开忙盒
    openBoxSuccess(prizeInfo) {
      this.prizeInfo = prizeInfo;
    },
    // 收下盲盒
    acceptBlindbox() {
      this.$router.go(-1);
    },
    // 点击支付
    onPayBtnClick() {
      this.$refs.payOrder.onDrawPrizeBtnClick();
    },
    //  展示盲和券
    showMoreCash() {
      this.show = true;
    },
    //  选择优惠券后点击确定
    selectCoupon() {
      let tempArr = this.list.filter((item) => {
        return item.id === this.checked;
      });
      if (tempArr.length) {
        this.couponInfo = tempArr[0];
        if (Number(this.boxInfo.price) >= Number(this.couponInfo.value)) {
          let tempPrice =
            Number(this.boxInfo.price) - Number(this.couponInfo.value);
          if (tempPrice) {
            this.practicalPayPrice = (tempPrice / 100).toFixed(2).toString();
          }
        } else {
          this.practicalPayPrice = 0;
        }
      }
      this.show = false;
    },
    // 获取现金券列表
    getList() {
      this.$toast.loading();
      apiCash
        .getAllCouponList({
          userId: this.userInfo.userId,
        })
        .then((data) => {
          this.$toast.clear();
          this.loading = false;
          this.finished = true;
          if (!data.data) {
            return;
          }
          let list = data.data;
          let tempArr = list.filter((item) => {
            let infoTime = item.expirationTime.replace(/-/g, "/");
            return new Date(infoTime) > new Date() && item.status !== 20;
          });
          // for (let index in list) {
          //   let isPast = false;
          //   if (list[index].expirationTime) {
          //     let infoTime = list[index].expirationTime.replace(/-/g, "/");
          //     if (new Date(infoTime) > new Date()) {
          //       isPast = false;
          //     } else {
          //       isPast = true;
          //     }
          //   }
          //   this.$set(list[index], "isPast", isPast);
          // }

          // console.log(9999999999999);
          // console.log(list);
          this.list = tempArr;
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.pay-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 40px 0;
  span:first-child {
    font-size: 30px;
    font-weight: 400;
    color: #555555;
    line-height: 42px;
  }
  span:nth-child(2) {
    font-size: 60px;
    font-weight: 600;
    color: #222222;
    line-height: 84px;
  }
}
::v-deep .van-cell.no-cell {
  display: none;
}
::v-deep .van-cell__value {
  .custom-title {
    color: #df5438;
  }
}
.pay-btn-box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  padding: 24px 24px;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  padding-bottom: calc(24px + constant(safe-area-inset-bottom));
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-right: 24px;
    .original-money {
      span {
        font-size: 30px;
        font-weight: 600;
        color: #df5438;
      }
      span:nth-child(2) {
        font-size: 50px;
        font-weight: 600;
        color: #df5438;
      }
    }
    .discounts-money {
      font-size: 24px;
      color: #df5438;
      line-height: 33px;
    }
  }
}
.van-button--primary {
  width: 240px;
  height: 80px;
  background-color: #3f87f0;
  border: 1px solid #3f87f0;
}
.van-cell-group--inset {
  margin: 0;
}
.content {
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
  .van-cell {
    padding-left: 0;
    padding-right: 0;
    .van-radio {
      position: absolute;
      top: 90px;
      transform: translate(0, -50%);
      width: 100%;
      height: 100%;
      padding-right: 24px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
  }
}
.van-action-sheet__content {
  padding-bottom: 160px;
  box-sizing: border-box;
  .van-radio-group {
    box-sizing: border-box;
  }
}
.btn-box {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 80px 24px 0 24px;
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  .van-button {
    width: 100%;
    height: 80px;
    margin-bottom: 17px;
  }
}
</style>
